<template>
  <div class="stu-con">
    <table>
      <thead>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody v-if="stuList.length > 0">
        <tr v-for="(item, index) in stuList" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <!-- 第一步 给slot标签以添加属性的方式传值 -->
          <td><slot v-bind:rowData="item" msg="测试消息"></slot></td>
          <!-- 第一步的操作会把数据封装成一个对象传给外部组件 -->
          <!-- {obj.sutId:item.id,msg:"测试传值"} -->
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td>我是有底线的</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">合计：{{ stuList.length }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
    name:'StuCon',
    props:{
        stuList:{
            type:Array
        }
    }
};
</script>

<style>
</style>